<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="100px">
      <el-form-item label="款号" prop="fashionNo">
        <el-input v-model="queryParams.fashionNo" placeholder="请输入款号" clearable style="width: 240px" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="名称" prop="fashionName">
        <el-input v-model="queryParams.fashionName" placeholder="请输入名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="分类" prop="categoryId">
        <el-tree-select style="width: 240px" v-model="queryParams.categoryId" :data="TypeList"
          :props="{ value: 'id', label: 'categoryName', children: 'children' }" value-key="id" placeholder="请选择款式分类" check-strictly />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
        <!--        <el-button type="primary" plain icon="Plus" @click="handleAdd">导入</el-button>
        <el-button type="primary" plain icon="Plus" @click="handleAdd">导入工价</el-button>
        <el-button type="primary" plain icon="Plus" @click="handleAdd">导入尺码</el-button>
        <el-button type="primary" plain icon="Plus" @click="handleAdd">导入辅料</el-button>
        <el-button type="primary" plain icon="Plus" @click="handleAdd">导入款号</el-button>
        <el-button type="primary" plain icon="Plus" @click="handleAdd">导出尺码</el-button> -->
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :scrollbar-always-on="true" :data="groupList">
      <el-table-column type="selection" width="55" />
      <el-table-column label="图片" type="index" width="120">
        <template #default="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.fashionImageUrl" fit="cover" />
        </template>
      </el-table-column>
      <el-table-column label="款号" prop="fashionNo" />
      <el-table-column label="名称" prop="fashionName" :show-overflow-tooltip="true" width="200"></el-table-column>
      <el-table-column label="分类" prop="categoryName" :show-overflow-tooltip="true" width="80" />
      <el-table-column label="尺码" prop="styleLinkMobile" :show-overflow-tooltip="true" width="150">
        <template #default="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.fashionSizeImageUrl" fit="cover" />
        </template>
      </el-table-column>
      <el-table-column label="片图" prop="styleLinkMobile" :show-overflow-tooltip="true" width="150">
        <template #default="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.fashionSliceImageUrl" fit="cover" />
        </template>
      </el-table-column>
      <el-table-column label="美工工价" prop="artDesignerWages" align="center" width="100"></el-table-column>
      <el-table-column label="绑定面料" align="center" width="120" prop="materialName"></el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="220">
        <template #default="scope">
          <el-button link type="primary" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button link type="primary" @click="getWagesList(scope.row)">工价</el-button>
          <el-button link type="primary" @click="getRetailList(scope.row)">零售价</el-button>
          <el-button link type="primary" @click="getFlList(scope.row)">辅料</el-button>
          <el-button link type="primary" @click="getCmList(scope.row)">尺码</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改款式配置对话框 -->
    <el-dialog :title="title" v-model="open" width="700px" append-to-body>
      <el-form ref="roleRef" :model="form" :rules="rules" label-width="130px">
        <el-form-item label="款式分类" prop="categoryId">
          <el-tree-select v-model="form.categoryId" :data="TypeList" :props="{ value: 'id', label: 'categoryName', children: 'children' }" value-key="id"
            placeholder="请选择款式分类" check-strictly />
        </el-form-item>
        <el-form-item label="款式编码" prop="fashionNo">
          <el-input v-model="form.fashionNo" type="phone" placeholder="请输入款式编码" />
        </el-form-item>
        <el-form-item label="款式名称" prop="fashionName">
          <el-input v-model="form.fashionName" placeholder="请输入款式名称" />
        </el-form-item>
        <el-form-item label="款式图片" prop="fashionImageUrl">
          <el-upload ref="uploadRef" style="width: 100%;" list-type="picture-card" v-model:file-list="fileList" :headers="headers" class="upload-demo"
            :action="actionUrl" :limit="1" :data="{ type: 0, tenantGroupId: tenantGroupId }" name="file" accept=".jpeg,.png" :on-error="handleUploadSuccess"
            :on-success="handleUploadSuccess" :on-exceed="handleExceed">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="尺码图片" prop="fashionSizeImageUrl">
          <el-upload ref="uploadRef2" list-type="picture-card" style="width: 100%;" v-model:file-list="fileList2" :headers="headers" class="upload-demo"
            :action="actionUrl" :limit="1" :data="{ type: 0, tenantGroupId: tenantGroupId }" name="file" accept=".jpeg,.png" :on-error="handleUploadSuccess2"
            :on-success="handleUploadSuccess2" :on-exceed="handleExceed2">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="款式片图" prop="fashionSliceImageUrl">
          <el-upload ref="uploadRef3" style="width: 100%;" list-type="picture-card" v-model:file-list="fileList3" :headers="headers" class="upload-demo"
            :action="actionUrl" :limit="1" :data="{ type: 0, tenantGroupId: tenantGroupId }" name="file" accept=".jpeg,.png" :on-error="handleUploadSuccess3"
            :on-success="handleUploadSuccess3" :on-exceed="handleExceed3">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="美工工价" prop="artDesignerWages">
          <el-input v-model="form.artDesignerWages" placeholder="请输入美工工价" />
        </el-form-item>
        <el-form-item label="绑定面料" prop="materialId">
          <el-select v-model="form.materialId" placeholder="请选择工序" clearable>
            <el-option v-for="dict in selList" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 添加或修改款式配置对话框 -->
    <el-dialog :title="gjtitle" v-model="gjOpen" width="700px" append-to-body>
      <div>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAddGj">新增</el-button>
          </el-col>
        </el-row>
        <el-table :data="gjDataList">
          <el-table-column label="工序" prop="fashionProcessName" width="200" />
          <el-table-column label="工价" prop="fashionWages" :show-overflow-tooltip="true" width="200"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
            <template #default="scope">
              <el-button link type="primary" @click="upDateGj(scope.row)">修改</el-button>
              <el-button link type="primary" @click="handleDeleteGj(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog :title="addgjtitle" v-model="addgjOpen" width="400px" append-to-body>
          <el-form ref="addGjRef" :model="addGjForm" :rules="addRules" label-width="100px">
            <el-form-item label="工序" prop="fashionProcess">
              <el-select v-model="addGjForm.fashionProcess" placeholder="请选择工序" clearable>
                <el-option v-for="dict in produce_process" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="工价" prop="fashionWages">
              <el-input-number v-model="addGjForm.fashionWages" style="width: 190px;" placeholder="请输入工价" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submitGjForm">确 定</el-button>
              <el-button @click="addgjOpen = false">取 消</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </el-dialog>
    <!-- 添加或修改款式尺码配置对话框 -->
    <el-dialog :title="cmtitle" v-model="cmOpen" width="700px" append-to-body>
      <div>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAddCm">新增</el-button>
          </el-col>
        </el-row>
        <el-table :data="cmDataList">
          <el-table-column label="尺码" prop="sizeNumber" width="200" />
          <el-table-column label="长度" prop="sizeLength" width="200"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
            <template #default="scope">
              <el-button link type="primary" @click="upDateCm(scope.row)">修改</el-button>
              <el-button link type="primary" @click="handleDeleteCm(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog :title="addcmtitle" v-model="addcmOpen" width="400px" append-to-body>
          <el-form ref="addCmRef" :model="addCmForm" :rules="addCmRules" label-width="100px">
            <el-form-item label="尺码" prop="sizeNumber">
              <el-input v-model="addCmForm.sizeNumber" placeholder="请输入尺码" />
            </el-form-item>
            <el-form-item label="长度" prop="sizeLength">
              <el-input-number step="0.1" v-model="addCmForm.sizeLength" placeholder="请输入长度" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submitCmForm">确 定</el-button>
              <el-button @click="addcmOpen = false">取 消</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </el-dialog>
    <!-- 添加或修改款式辅料配置对话框 -->
    <el-dialog :title="fltitle" v-model="flOpen" width="700px" append-to-body>
      <div>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAddFl">新增</el-button>
          </el-col>
        </el-row>
        <el-table :data="flDataList">
          <el-table-column label="类型" prop="typeName" width="200" />
          <el-table-column label="名称" prop="costName" width="200"></el-table-column>
          <el-table-column label="单价" prop="costUnitPrice" width="200"></el-table-column>
          <el-table-column label="成本价" prop="costPrice" width="200"></el-table-column>
          <el-table-column label="数量" prop="costNum" width="200"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
            <template #default="scope">
              <el-button link type="primary" @click="upDateFl(scope.row)">修改</el-button>
              <el-button link type="primary" @click="handleDeleteFl(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog :title="addfltitle" v-model="addflOpen" width="400px" append-to-body>
          <el-form ref="addFlRef" :model="addFlForm" :rules="addFlRules" label-width="100px">
            <el-form-item label="名称" prop="costName">
              <el-input v-model="addFlForm.costName" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="单价" prop="costUnitPrice">
              <el-input-number style="width: 180px;" v-model="addFlForm.costUnitPrice" placeholder="请输入单价" />
            </el-form-item>
            <el-form-item label="成本价" prop="costPrice">
              <el-input-number style="width: 180px;" v-model="addFlForm.costPrice" placeholder="请输入成本价" />
            </el-form-item>
            <el-form-item label="数量" prop="costNum">
              <el-input-number style="width: 180px;" v-model="addFlForm.costNum" type="number" placeholder="请输入数量" />
            </el-form-item>
            <el-form-item label="备注说明" prop="remark">
              <el-input v-model="addFlForm.remark" placeholder="请输入备注说明" type="textarea" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submitFlForm">确 定</el-button>
              <el-button @click="addflOpen = false">取 消</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </el-dialog>
    <!-- 添加或修改款式零售价配置对话框 -->
    <el-dialog :title="lsjtitle" v-model="lsjOpen" width="1000px" append-to-body>
      <div>
        <div style="padding: 5px 0;border-bottom: 1px solid #dcdfe6;margin-bottom: 10px;">
          <el-form :model="lsjParams" ref="lsjParamsRef" label-position="left" :inline="true" label-width="50px">
            <el-form-item label="名称:" prop="materialName">
              <el-input v-model="lsjParams.materialName" placeholder="请输入名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="尺码:" prop="sizeNumber">
              <el-input v-model="lsjParams.sizeNumber" placeholder="请输入尺码" clearable style="width: 240px" @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="lsjhandleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="lsjresetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Edit" :disabled="!lsjDataList.length?true:false" @click="upDateLsj(lsjDataList[0])">修改系数</el-button>
            <el-button type="primary" plain icon="Plus" @click="handleAddLsj">添加物料</el-button>
            <el-button type="danger" plain icon="Delete" :disabled="!lsjDataList.length?true:false" @click="handleDeleteLsj(lsjDataList[0])">删除物料</el-button>
          </el-col>
        </el-row>
        <el-table :data="lsjDataList">
          <el-table-column label="物料" prop="materialName" width="200" />
          <el-table-column label="尺码" prop="sizeNumber" width="200"></el-table-column>
          <el-table-column label="长度" prop="sizeLength" width="200"></el-table-column>
          <el-table-column label="美工工价" prop="artDesignerWages" width="200"></el-table-column>
          <el-table-column label="成本价格" prop="costPrice" width="200"></el-table-column>
          <el-table-column label="零售系数" prop="fashionRetailRate" width="200"></el-table-column>
          <el-table-column label="零售价格" prop="retailPrice" width="200"></el-table-column>
          <el-table-column label="出厂系数" prop="fashionFactoryRate" width="200"></el-table-column>
          <el-table-column label="出厂价格" prop="factoryPrice" width="200"></el-table-column>
        </el-table>
        <el-dialog :title="addlsjtitle" v-model="addlsjOpen" width="600px" append-to-body>
          <div v-if="addlsjtitle=='选择物料'">
            <el-table :data="materialListData">
              <el-table-column label="" prop="sizeNumber" width="80" fixed="left">
                <template #default="scope">
                  <el-radio :value="scope.row.id" v-model="addLsjForm.materialId"></el-radio>
                </template>
              </el-table-column>
              <el-table-column label="名称" prop="materialName" />
            </el-table>
            <pagination style="position: relative!important;" v-show="materialParams.total > 0" :total="materialParams.total"
              v-model:page="materialParams.pageNum" v-model:limit="materialParams.pageSize" @pagination="getMaterialList" />
          </div>
          <div v-else>
            <el-form ref="addLsjRef" :model="addLsjForm" :rules="addLsjRules" label-width="100px">
              <el-form-item label="出场系数" prop="fashionFactoryRate">
                <el-input-number v-model="addLsjForm.fashionFactoryRate" style="width: 200px;" placeholder="请输入出场系数" />
              </el-form-item>
              <el-form-item label="零售系数" prop="fashionRetailRate">
                <el-input-number v-model="addLsjForm.fashionRetailRate" style="width: 200px;" placeholder="请输入零售系数" />
              </el-form-item>
            </el-form>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submitLsjForm">确 定</el-button>
              <el-button @click="addlsjOpen = false">取 消</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="style">
  import { listType } from "@/api/order/type";
  import {
    list,
    add,
    edit,
    remove,
    addfashionWages,
    fashionWagesList,
    editfashionWages,
    removefashionWages,
    fashionSizeList,
    addfashionSize,
    editfashionSize,
    removefashionSize,
    fashionCostList,
    addfashionCost,
    editfashionCost,
    removefashionCost,
    fashionRetailList,
    materialList,
    fashionEdit,
    rateEdit,
    fashionRemove,
    materialSelList
  } from "@/api/order/style"
  import {
    listapplicant,
  } from "@/api/system/applicant";
  import baseForm from "../hooks/useOrderBase";
  const { headers, actionUrl, fileList, fileList2, fileList3, tenantGroupId } = baseForm();
  const router = useRouter();
  const route = useRoute()
  const { proxy } = getCurrentInstance();
  const { cost_type, produce_process } = proxy.useDict("cost_type", "produce_process");
  const TypeList = ref([])
  const groupList = ref([]);
  const open = ref(false);
  const appLicationList = ref([])
  const loading = ref(true);
  const showSearch = ref(true);
  const ids = ref([]);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  const title = ref("");
  const dateRange = ref([]);
  const menuOptions = ref([]);
  const menuExpand = ref(false);
  const menuNodeAll = ref(false);
  const deptExpand = ref(true);
  const deptNodeAll = ref(false);
  const deptOptions = ref([]);
  const openDataScope = ref(false);
  const menuRef = ref(null);
  const deptRef = ref(null);
  /** 数据范围选项*/
  const gjtitle = ref('')
  const gjOpen = ref(false)
  const addgjOpen = ref(false)
  const gjDataList = ref([])
  const addCmForm = ref({})
  const addcmtitle = ref('')
  const addFlForm = ref({})
  const addfltitle = ref('')
  const addLsjForm = ref({})
  const addlsjtitle = ref('')
  const materialListData = ref([])
  /** 零售价列表*/
  const lsjtitle = ref('')
  const lsjOpen = ref(false)
  const addlsjOpen = ref(false)
  const lsjDataList = ref([])
  /** 尺码列表*/
  const cmtitle = ref('')
  const cmOpen = ref(false)
  const addcmOpen = ref(false)
  const cmDataList = ref([])
  /** 辅料列表*/
  const fltitle = ref('')
  const flOpen = ref(false)
  const addflOpen = ref(false)
  const flDataList = ref([])
  // 文件上传覆盖
  const uploadRef = ref();
  const addGjForm = ref({})
  const addgjtitle = ref('')
  const selList = ref([])
  //获取面料列表
  function getMaterialSelList() {
    materialSelList({}).then((res) => {
      selList.value = res.data || [];
    })
  }
  //获取物料列表
  function getMaterialList() {
    let queryModel = { ...materialParams.value }
    materialList({ ...queryModel }).then((res) => {
      materialListData.value = res.rows;
      materialParams.value.total = res.total
    })
  }

  function handleAddLsj() {
    addlsjtitle.value = '选择物料';
    getMaterialList();

    addlsjOpen.value = true;
    addLsjForm.value = {
      fashionId: addLsjForm.value.fashionId || ''
    }
  }

  function handleAddFl() {
    addfltitle.value = '新增辅料';
    addflOpen.value = true;
    addFlForm.value = {
      fashionId: addFlForm.value.fashionId || ''
    }
  }

  function handleAddGj() {
    addgjtitle.value = '新增工价';
    addgjOpen.value = true;
    addGjForm.value = {
      fashionId: addGjForm.value.fashionId || ''
    }
  }

  function handleAddCm() {
    addcmtitle.value = '新增尺码';
    addcmOpen.value = true;
    addCmForm.value = {
      fashionId: addCmForm.value.fashionId || ''
    }
  }
  /** 搜索按钮操作 */
  function lsjhandleQuery() {
    queryParams.value.pageNum = 1;
    getRetailList();
  }
  /** 重置按钮操作 */
  function lsjresetQuery() {
    dateRange.value = [];
    lsjParams.value = {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      materialName: '',
      sizeNumber: ''
    }
    lsjhandleQuery();
  }
  // 零售价
  function getRetailList(item) {
    addLsjForm.value.fashionId = item.id ? item.id : addLsjForm.value.fashionId;
    lsjtitle.value = `${item.fashionName}零售价`
    fashionRetailList({
      fashionId: addLsjForm.value.fashionId,
      ...lsjParams.value
    }).then((res) => {
      lsjOpen.value = true
      lsjDataList.value = res.rows
    })
  }
  // 辅料
  function getFlList(item) {
    addFlForm.value.fashionId = item.id ? item.id : addFlForm.value.fashionId;
    fltitle.value = `${item.fashionName}辅料`
    fashionCostList({
      fashionId: addFlForm.value.fashionId
    }).then((res) => {
      flOpen.value = true
      flDataList.value = res.rows
    })
  }
  // 工价
  function getWagesList(item) {
    addGjForm.value.fashionId = item.id ? item.id : addGjForm.value.fashionId;
    gjtitle.value = `${item.fashionName}工价`
    fashionWagesList({
      fashionId: addGjForm.value.fashionId
    }).then((res) => {
      gjOpen.value = true
      gjDataList.value = res.rows
    })
  }
  // 尺码
  function getCmList(item) {
    addCmForm.value.fashionId = item.id ? item.id : addCmForm.value.fashionId;
    cmtitle.value = `${item.fashionName}尺码`
    fashionSizeList({
      fashionId: addCmForm.value.fashionId
    }).then((res) => {
      cmOpen.value = true
      cmDataList.value = res.rows
    })
  }

  function handleExceed(files) {
    uploadRef.value.clearFiles();
    nextTick(() => {
      uploadRef.value.handleStart(files[0]);
      uploadRef.value.submit();
    });
  }
  const uploadRef2 = ref();

  function handleExceed2(files) {
    uploadRef2.value.clearFiles();
    nextTick(() => {
      uploadRef2.value.handleStart(files[0]);
      uploadRef2.value.submit();
    });
  }
  const uploadRef3 = ref();

  function handleExceed3(files) {
    uploadRef3.value.clearFiles();
    nextTick(() => {
      uploadRef3.value.handleStart(files[0]);
      uploadRef3.value.submit();
    });
  }
  // 上传成功回调
  function handleUploadSuccess(res, file) {
    // 如果上传成功
    if (res.code == 200) {
      fileList.value = fileList.value.map((r) => { return r.response.data });
      form.value.fashionImageUrl = res.data.url;
    } else {
      proxy.$modal.msgError("上传失败:" + res.msg);
    }
  }
  // 上传成功回调
  function handleUploadSuccess2(res, file) {
    // 如果上传成功
    if (res.code == 200) {
      fileList2.value = fileList2.value.map((r) => { return r.response.data });
      form.value.fashionSizeImageUrl = res.data.url;
    } else {
      proxy.$modal.msgError("上传失败:" + res.msg);
    }
  }
  // 上传成功回调
  function handleUploadSuccess3(res, file) {
    // 如果上传成功
    if (res.code == 200) {
      fileList3.value = fileList3.value.map((r) => { return r.response.data });
      form.value.fashionSliceImageUrl = res.data.url;
    } else {
      proxy.$modal.msgError("上传失败:" + res.msg);
    }
  }
  /** 查询分类列表 */
  function getTypeList() {
    listType(queryParams.value).then(response => {
      TypeList.value = proxy.handleTree(response.data, "id", "categoryParentId");
    });
  }
  const data = reactive({
    form: {},
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      categoryId: null,
      fashionNo: undefined,
      fashionName: undefined
    },
    lsjParams: {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      materialName: '',
      sizeNumber: ''
    },
    materialParams: {
      pageNum: 1,
      pageSize: 10,
      total: 0
    },
    rules: {
      categoryId: [{ required: true, message: "款式分类不能为空", trigger: "blur" }],
      fashionNo: [{ required: true, message: "款式编码不能为空", trigger: "blur" }],
      fashionName: [{ required: true, message: "款式名称不能为空", trigger: "blur" }],
      artDesignerWages: [{ required: true, message: "美工工价不能为空", trigger: "blur" }],
      fashionFabric: [{ required: true, message: "面料不能为空", trigger: "blur" }],
    },
    addRules: {
      fashionWages: [{ required: true, message: "工价不能为空", trigger: "blur" }],
      fashionProcess: [{ required: true, message: "工序不能为空", trigger: "blur" }],
    },
    addCmRules: {
      sizeNumber: [{ required: true, message: "尺码不能为空", trigger: "blur" }],
      sizeLength: [{ required: true, message: "长度不能为空", trigger: "blur" }],
    },
    addFlRules: {
      type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
      costName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
      costUnitPrice: [{ required: true, message: "成本价不能为空", trigger: "blur" }],
      costNum: [{ required: true, message: "数量不能为空", trigger: "blur" }],
    }
  });
  const { queryParams, form, rules, materialParams, lsjParams, addRules, addCmRules, addFlRules } = toRefs(data);
  /** 查询款式列表 */
  function getList() {
    loading.value = true;
    let formQueryParam = { ...queryParams.value };
    formQueryParam.expireTemp = formQueryParam.expireTemp == 0 ? '' : formQueryParam.expireTemp
    list(proxy.addDateRange(formQueryParam, dateRange.value)).then(response => {
      groupList.value = response.rows
      total.value = response.total;
      loading.value = false;
    });
  }

  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
  }
  /** 重置按钮操作 */
  function resetQuery() {
    dateRange.value = [];
    queryParams.value = {
      pageNum: 1,
      pageSize: 10,
      categoryId: null,
      fashionNo: undefined,
      fashionName: undefined
    }
    handleQuery();
  }

  /** 删除按钮操作 */
  function handleDelete(row) {
    const ids = row.id || ids.value;
    proxy.$modal.confirm('是否确认删除款式编号为"' + ids + '"的数据项?').then(function() {
      return remove(ids);
    }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
  }
  /** 删除零售价按钮操作 */
  function handleDeleteLsj(row) {
    proxy.$modal.confirm('是否确认删除物料?').then(function() {
      return fashionRemove(addLsjForm.value.fashionId);
    }).then(() => {
      proxy.$modal.msgSuccess("删除成功");
      fashionRetailList({
        fashionId: addLsjForm.value.fashionId
      }).then((res) => {
        lsjOpen.value = true
        lsjDataList.value = res.rows
      })
    }).catch(() => {});
  }
  /** 删除尺码按钮操作 */
  function handleDeleteFl(row) {
    const ids = row.id || ids.value;
    proxy.$modal.confirm('是否确认删除这条?').then(function() {
      return removefashionCost(ids);
    }).then(() => {
      proxy.$modal.msgSuccess("删除成功");
      fashionCostList({
        fashionId: row.fashionId
      }).then((res) => {
        flOpen.value = true
        flDataList.value = res.rows
      })
    }).catch(() => {});
  }
  /** 删除尺码按钮操作 */
  function handleDeleteCm(row) {
    const ids = row.id || ids.value;
    proxy.$modal.confirm('是否确认删除这条?').then(function() {
      return removefashionSize(ids);
    }).then(() => {
      proxy.$modal.msgSuccess("删除成功");
      fashionSizeList({
        fashionId: row.fashionId
      }).then((res) => {
        cmOpen.value = true
        cmDataList.value = res.rows
      })
    }).catch(() => {});
  }
  /** 删除工价按钮操作 */
  function handleDeleteGj(row) {
    const ids = row.id || ids.value;
    proxy.$modal.confirm('是否确认删除这条?').then(function() {
      return removefashionWages(ids);
    }).then(() => {
      proxy.$modal.msgSuccess("删除成功");
      fashionWagesList({
        fashionId: row.fashionId
      }).then((res) => {
        gjOpen.value = true
        gjDataList.value = res.rows
      })
    }).catch(() => {});
  }
  /** 导出按钮操作 */
  function handleExport() {
    proxy.download("system/role/export", {
      ...queryParams.value,
    }, `role_${new Date().getTime()}.xlsx`);
  }

  /** 多选框选中数据 */
  function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
  }



  /** 重置新增的表单以及其他数据  */
  function reset() {
    if (menuRef.value != undefined) {
      menuRef.value.setCheckedKeys([]);
    }
    menuExpand.value = false;
    menuNodeAll.value = false;
    deptExpand.value = true;
    deptNodeAll.value = false;
    form.value = {
      styleName: undefined,
      styleLinkName: undefined,
      styleLinkMobile: '',
      styleExpireStatus: 'F',
      styleAvl: 'Y',
      tenantCreateParams: []
    };
    proxy.resetForm("roleRef");
  }

  /** 添加款式 */
  function handleAdd() {
    reset();
    open.value = true;
    fileList.value = [];
    fileList2.value = [];
    fileList3.value = [];
    getTypeList()
    getMaterialSelList()
    title.value = "添加款式";
  }
  //修改物料
  function upDateLsj(row) {
    addLsjForm.value = { ...addLsjForm.value, ...row };
    addlsjtitle.value = '修改系数'
    addlsjOpen.value = true;
  }
  //修改辅料
  function upDateFl(row) {
    addFlForm.value = { ...row };
    addfltitle.value = '修改尺码'
    addflOpen.value = true;
  }
  //修改尺码
  function upDateCm(row) {
    addCmForm.value = { ...row };
    addcmtitle.value = '修改尺码'
    addcmOpen.value = true;
  }
  //修改工价
  function upDateGj(row) {
    addGjForm.value = { ...row };
    addgjtitle.value = '修改工价'
    addgjOpen.value = true;
  }
  /** 修改款式 */
  function handleUpdate(row) {
    reset();
    getTypeList()
    getMaterialSelList()
    form.value = { ...row };
    fileList.value = form.value.fashionImageUrl ? form.value.fashionImageUrl.split(',').map((res) => {
      return { name: res, url: res }
    }) : [];
    fileList2.value = form.value.fashionSizeImageUrl ? form.value.fashionImageUrl.split(',').map((res) => {
      return { name: res, url: res }
    }) : [];
    fileList3.value = form.value.fashionSliceImageUrl ? form.value.fashionImageUrl.split(',').map((res) => {
      return { name: res, url: res }
    }) : []
    open.value = true;
    title.value = "修改款式";
  }

  /** 树权限（全选/全不选） */
  function handleCheckedTreeNodeAll(value, type) {
    if (type == "menu") {
      menuRef.value.setCheckedNodes(value ? menuOptions.value : []);
    } else if (type == "dept") {
      deptRef.value.setCheckedNodes(value ? deptOptions.value : []);
    }
  }
  /** 提交零售价按钮 */
  function submitLsjForm() {
    if (addlsjtitle.value == '选择物料') {
      if (!addLsjForm.value.materialId) {
        proxy.$modal.msgWarning("请选择物料~");
        return
      }
      fashionEdit({
        fashionId: addLsjForm.value.fashionId,
        materialId: addLsjForm.value.materialId
      }).then(response => {
        proxy.$modal.msgSuccess("新增成功");
        addlsjOpen.value = false;
        fashionRetailList({
          fashionId: addLsjForm.value.fashionId
        }).then((res) => {
          lsjOpen.value = true
          lsjDataList.value = res.rows
        })
      });
    } else {
      proxy.$refs["addLsjRef"].validate(valid => {
        if (valid) {
          rateEdit({
            fashionId: addLsjForm.value.fashionId,
            fashionRetailRate: addLsjForm.value.fashionRetailRate,
            fashionFactoryRate: addLsjForm.value.fashionRetailRate
          }).then(response => {
            proxy.$modal.msgSuccess("系数修改成功");
            addlsjOpen.value = false;
            fashionRetailList({
              fashionId: addLsjForm.value.fashionId
            }).then((res) => {
              lsjOpen.value = true
              lsjDataList.value = res.rows
            })
          });
        }
      });
    }
  }
  /** 提交尺码按钮 */
  function submitFlForm() {
    proxy.$refs["addFlRef"].validate(valid => {
      if (valid) {
        if (addFlForm.value.id != undefined) {
          editfashionCost(addFlForm.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            addflOpen.value = false;
            fashionCostList({
              fashionId: addFlForm.value.fashionId
            }).then((res) => {
              flOpen.value = true
              flDataList.value = res.rows
            })
          });
        } else {
          addfashionCost(addFlForm.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            addflOpen.value = false;
            fashionCostList({
              fashionId: addFlForm.value.fashionId
            }).then((res) => {
              flOpen.value = true
              flDataList.value = res.rows
            })
          });
        }
      }
    });
  }
  /** 提交尺码按钮 */
  function submitCmForm() {
    proxy.$refs["addCmRef"].validate(valid => {
      if (valid) {
        if (addCmForm.value.id != undefined) {
          editfashionSize(addCmForm.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            addcmOpen.value = false;
            fashionSizeList({
              fashionId: addCmForm.value.fashionId
            }).then((res) => {
              cmOpen.value = true
              cmDataList.value = res.rows
            })
          });
        } else {
          addfashionSize(addCmForm.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            addcmOpen.value = false;
            fashionSizeList({
              fashionId: addCmForm.value.fashionId
            }).then((res) => {
              cmOpen.value = true
              cmDataList.value = res.rows
            })
          });
        }
      }
    });
  }
  /** 提交工价按钮 */
  function submitGjForm() {
    proxy.$refs["addGjRef"].validate(valid => {
      if (valid) {
        if (addGjForm.value.id != undefined) {
          editfashionWages(addGjForm.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            addgjOpen.value = false;
            fashionWagesList({
              fashionId: addGjForm.value.fashionId
            }).then((res) => {
              gjOpen.value = true
              gjDataList.value = res.rows
            })
          });
        } else {
          addfashionWages(addGjForm.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            addgjOpen.value = false;
            fashionWagesList({
              fashionId: addGjForm.value.fashionId
            }).then((res) => {
              gjOpen.value = true
              gjDataList.value = res.rows
            })
          });
        }
      }
    });
  }
  /** 提交按钮 */
  function submitForm() {
    let pass = true
    if (!form.value.id && form.value.tenantCreateParams && form.value.tenantCreateParams.length) {
      form.value.tenantCreateParams.forEach((a, index) => {
        if (!a.applicantId || !a.tenantCode || !a.tenantName) {
          pass = false
        }
      })
    }
    if (!pass) {
      proxy.$modal.msgWarning("款式列表下内容不能有空~");
      return
    }
    // if (form.value.styleExpireStatus == 'T' && !form.value.styleExpireDate) {
    //   proxy.$modal.msgWarning("请选择截止日期~");
    //   return
    // }
    proxy.$refs["roleRef"].validate(valid => {
      if (valid) {
        if (form.value.id != undefined) {
          edit(form.value).then(response => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          });
        } else {
          add(form.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
          });
        }
      }
    });
  }

  /** 取消按钮 */
  function cancel() {
    open.value = false;
    reset();
  }

  getList();
  getTypeList()
</script>